<template>
    <div class="time_player">
        <div v-if="hasDate" class="timeSelect">
            <template>
                <el-date-picker
                v-model="selectDate"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
            </template>
        </div>
        <div class="content">
            <span :class="[playFlag ? 'playing':'stoping','player']" @click="playData"></span>
            <span class="reSet" @click="reSet(1)"></span>
            <!-- 基础进度条 -->
            <div class="progress_base">
                 <!-- 已播放的进度条 -->
                <div class="progress_play"></div>
                <!-- 刻度 -->
                <div class="scales">
                    <span v-for="item,index in scalesCount" :key="index" :class="[item == scalesCount ? 'jt' : '',index == curTimeIndex ? 'curScale' : '','scale']" @click="playByTime(index)">           
                    </span>
                </div>                     
            </div>
             <!-- 时间 -->
             <div class="times">
                <span v-for="item,index in times" :key="index" class="time" :style="{width:timeWidth}">     
                    {{item | formateTime}}      
                </span>
            </div>
            <div class="cur_marker_wrap" ref="curMarker">
                <span class="text">{{ playTime }}</span>
                <span class="top"></span>
                <span class="cur_marker"></span>
            </div>      
        </div>  
    </div>
</template>

<script>
import util from '../js/util';
export default {
    data(){
        return{
            // startTime:'',//开始时间
            // endTime:'',//结束时间
            // hasScale:true,//是否显示刻度
            // interval_time:'',//时间间隔
            // step:'',//刻度间隔
            // stepWidth:'',//没一个刻度间的宽度
            // hasDate:true,//是否有左侧的时间选择框
            scalesCount:0,
            scales:[],
            times:[],
            timeWidth:'',//每一时间间隔的宽度
            playTime:'',//当前播放时间
            curMarker:'',//当前时间
            curTimeIndex: 0,
            playFlag:false,//播放标记
            intVal:null,
            selectDate:''
            // innerMarker:0
        }
    },
    props:{
        startTime:String,//开始时间
        endTime:String,//结束时间
        hasScale:{
            type:Boolean,
            defaault:true
        },
        interval_time:String,//时间间隔
        step:String,
        hasDate:{
            type:Boolean,
            defaault:true
        }//是否有左侧的时间选择框
    },
    inheritAttrs:false,
    created(){
        console.log('timePlayer:'+this.s)
    },
    mounted(){
        let val = Number(this.startTime);
        while(val <= this.endTime){      
            this.times.push(val);
            val += Number(this.interval_time);
        }
        this.scalesCount = parseInt((this.endTime - this.startTime)/ this.step) + 1;
        this.timeWidth = 362 / ((this.endTime - this.startTime) / 4)  + 'px';
        this.stepWidth = 362 / ((this.endTime - this.startTime) / this.step) ;    
        this.reSet();
        //时间
        if(this.hasDate){
            this.selectDate = util.getFullDate();
        }
    },
    filters:{
        formateTime(val){            
            if(val.toString().length < 2){
                val = `0${val}`
            }
            return `${val}:00`;
        }
    },
    methods:{
        //自动播放
        playData(){
            this.playFlag = !this.playFlag;            
            let that = this;
            clearInterval(that.intVal);
            let curHours = new Date().getHours() % 2 == 0 ? new Date().getHours() : new Date().getHours() - 1;    
            let play = () => {
                if(that.$refs.curMarker){
                    that.curTimeIndex ++ ;   
                    let time = Number(that.startTime) + that.curTimeIndex * that.step;   
                    if(time > curHours){
                        clearInterval(that.intVal);
                        that.reSet(1);
                        that.playFlag = false;
                    }else{
                        that.$refs.curMarker.style.left = that.$refs.curMarker.offsetLeft + that.stepWidth + 'px';  
                        that.playTime = `${util.getFullDate ()} ${that.getTime(time)}`;                        
                        if(time == that.endTime){
                            time = '00';
                        }
                        that.$emit('startPlay',that.getTime(time),that.selectDate);                           
                        // clearInterval(that.intVal);
                    }        
                }                                                    
            }
            if(that.playFlag){
                //游标初始化                
                that.$refs.curMarker.style.left = 33 + 'px' ; 
                that.curTimeIndex = 0;  
                let time = Number(that.startTime) + that.curTimeIndex * that.step;        
                that.playTime = `${util.getFullDate ()} ${that.getTime(time)}`;      
                that.$emit('startPlay',that.getTime(time),that.selectDate );   
                that.intVal = setInterval(play,2000);
            }else if(!that.playFlag){
                that.$emit('stopPlay');
            }
        },
        playByTime(index){
            this.curTimeIndex = index; 
            this.$refs.curMarker.style.left = 33 + index * this.stepWidth + 'px'; 
            let time = Number(this.startTime) + this.curTimeIndex * this.step;            
            this.playTime = `${util.getFullDate ()} ${this.getTime(time)}`;                        
            if(time == this.endTime){
                time = '00';
            }
            this.$emit('startPlay',this.getTime(time),this.selectDate);   
        },
        getTime(time){            
            if(time.toString().length < 2){
                time = `0${time}`
            }
            return `${time}:00`;
        }, 
        //显示当前数据 
        showCurData(){
            this.$emit('showCurData',this.selectDate);
        } ,
        reSet(type){
            //游标放到当前时间 
            let curHours = new Date().getHours() % 2 == 0 ? new Date().getHours() : new Date().getHours() - 1;                     
            this.playTime = `${util.getFullDate ()} ${curHours}:00`;
            let distant = (curHours-this.startTime)/2 * this.stepWidth;
            this.$refs.curMarker.style.left = 33 + distant + 'px' ;  
            this.curTimeIndex = this.times.indexOf(curHours) * this.step;            
            if(type) 
                this.showCurData();
        }
    }
}
</script>

<style lang="less" scoped>
    .time_player{
        width: 100%;
        height: 58px;
        backdrop-filter: blur(4px);
        border-radius: 2px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .timeSelect{
            width: 120px;
            height: 24px;
        }
        .content{
            width: 438px;
            height: 24px;
            margin-left: 8px;
            background: rgba(149, 164, 171, 0.1);
            backdrop-filter: blur(4px);
            border-radius: 2px;
            margin-top: auto;
            margin-bottom: auto;
            border: 1px solid;
            // border-image: linear-gradient(90deg, rgba(181, 188, 190, 0.4) 1%, rgba(181, 188, 190, 0) 102.11%);
            border-width:1px;
			border-style: solid;
			border-image: linear-gradient(90deg,rgba(181, 188, 190, 0.4), rgba(181, 188, 190, 0)) 10 10;            
            display: flex;
            flex-direction: row;
            align-items: center;
            .player{
                display: inline-block;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                background-position: 0px 2px;
                position: absolute;
                left: 10px;
                cursor: pointer;
            }
            .stoping{
                background: url('~@/assets/image/Play@1x.png') no-repeat 0px 0px;
            }
            .playing{
                background: url('~@/assets/image/play.png') no-repeat 0px 0px;
            }
            .reSet{
                display: inline-block;
                width: 19px;
                height: 19px;
                background: url('~@/assets/image/Refresh@1x.png') no-repeat 0px 0px;
                border-radius: 50%;
                position: absolute;
                right: 4px;
                cursor: pointer;
            }
            .progress_base{
                position: absolute;
                left: 30px;
                width: 362px;
                height: 1px;
                background-color: rgba(77, 119, 132, 1);
                margin: auto 10px;
                .scales{
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    margin-top: -7px;                   
                    .scale{
                        width: 4px;
                        height: 7px;
                        display: inline-block;
                        background-color: #4D7784; 
                        // padding: 0 2px;
                    }
           
                    .curScale{
                        background-color: #FFFFFF; 
                    }
                }
               
                
            }
            .times{
                width:422px;
                margin: 40px auto 0px auto;
                // margin-top: 12px;
                .time{
                    display: inline-block;
                    text-align: center;
                    color: rgba(255,255,255,0.6);
                    font-size: 12px;                    
                }
            }
            .cur_marker_wrap{
                position: absolute;
                width: 12px;
                height: 35px;
                left: 36px;
                top: -22px;
                text-align: center;
                .cur_marker{
                    display: inline-block;
                    width: 10px;
                    height: 20px;
                    border: 1px solid rgba(31, 198, 255, 0.8);
                    background: linear-gradient(180deg, rgba(31, 198, 255, 0.1) -67.5%, rgba(31, 198, 255, 0.3) 113.41%);
                    // backdrop-filter: blur(2px);
                    border-radius: 1px;
                }
                .top{
                    display: inline-block;
                    width: 10px;
                    height: 9px;
                    background: url('~@/assets/image/Polygon 18.png') no-repeat;
                }
                .text{
                    position: absolute;
                    top: -14px;
                    width: 128px;
                    font-size: 12px;
                    color: #FFFFFF;
                    left: -53px;
                }
            }
        }
        
       
    }
</style>